<template>
  <div class="toolbar">
    <mu-slide-bottom-transition>
      <div class="tool-btn" v-if="isCheck">
        <span class="icon" @click="deleteNote">
          <mu-icon value="删除"></mu-icon>
        </span>
        <span class="icon" @click="cancelCheck">
          <mu-icon value="取消"></mu-icon>
        </span>
      </div>
      <div class="add-note" v-else>
        <div style="flex:1;"></div>
        <div class="float-button mu-float-button" @click="addNote">
          <mu-icon value="新增"></mu-icon>
        </div>
      </div>
    </mu-slide-bottom-transition>
    <mu-dialog :open="dialog" title="删除便签" @close="close">
      您确定删除所选便签吗？
      <mu-button slot="actions" flat @click="close" primary>取消</mu-button>
      <mu-button slot="actions" flat primary @click="deleteConfirm">确定</mu-button>
    </mu-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "toolbar",
  data() {
    return {
      dialog: false
    };
  },
  computed: {
    ...mapGetters(["isCheck"])
  },
  methods: {
    //添加便签
    addNote() {
      this.$store.dispatch("newNote");
      this.$router.push({ path: "editor" });
    },
    //删除便签
    deleteNote() {
      this.dialog = true;
    },
    //关闭窗口
    close() {
      this.dialog = false;
    },
    //确定删除
    deleteConfirm() {
      this.dialog = false;
      this.$store.dispatch("deleteNote");
    },
    //取消勾选
    cancelCheck() {
      this.$store.dispatch("cancelCheck");
    }
  }
};
</script>

<style scoped>
.toolbar {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.toolbar .add-note {
  padding: 25px;
  text-align: right;
  display: flex;
}
.toolbar .float-button {
  text-align: center;
  height: 3rem;
  width: 3rem;
  line-height: 3rem;
  font-size: 20px;
}
.toolbar .tool-btn {
  height: 3rem;
  line-height: 3rem;
  background: #fff;
  text-align: center;
  color: #777;
}
.toolbar .tool-btn .icon {
  display: inline-block;
  margin: 0 2rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 2rem;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
}
</style>

